<template>
	<z-paging ref="paging" v-model="dataList" @query="getRecommendSence">
		<view class="container">
			<!-- 搜索区域 -->
			<view class="search-area">
				<!-- <view class="location">
				<uni-icons type="location" size="20" color="#4AA5FF"></uni-icons>
				<text class="city">广州市</text>
			</view> -->
				<uv-input placeholder="请输入景点名称" clearable v-model="searchValue" shape="circle">
					<!-- vue3模式下必须使用v-slot:prefix -->
					<template v-slot:prefix>
						<uv-icon name="search" @click="search"></uv-icon>
					</template>
				</uv-input>
			</view>
			<!-- 轮播图区域 -->
			<!-- <swiper class="banner" circular autoplay interval="3000" duration="500" :indicator-dots="true"
			indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" class="banner-image" />
				<view class="banner-title">{{item.title}}</view>
			</swiper-item>
		</swiper> -->
			<!-- 热门城市推荐 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">热门城市</text>
					<view class="more" @click="scanAllCity()">
						<text>更多城市</text>
						<uni-icons type="right" size="14" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view class="city-list">
					<view class="city-item" v-for="(city, index) in recommendCityList" :key="index"
						@click="openCitySencePage(city.adCode)">
						<image :src="city.img" mode="aspectFill" class="city-image" />
						<text class="city-name">{{city.cnName}}</text>
						<!-- <text class="city-desc">{{city.description}}</text>
					<view class="city-hot">{{city.hot}}热度</view> -->
					</view>
				</scroll-view>
			</view>
			<!-- 热门景点推荐 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">热门景点</text>
					<view class="more">
						<text>查看全部</text>
						<uni-icons type="right" size="14" color="#999"></uni-icons>
					</view>
				</view>
				<view class="spot-grid">
					<view class="spot-item" v-for="(sence, index) in dataList" :key="index"
						@click="openSencePage(sence.id)">
						<image :src="sence.imgUrl==null?img:sence.imgUrl" mode="aspectFill" class="spot-image" />
						<view class="spot-info">
							<text class="spot-name">{{sence.name}}</text>
							<text class="spot-location">{{sence.location}}</text>
							<view class="spot-bottom">
								<view class="spot-score">
									<uni-icons type="star-filled" size="12" color="#FF9500"></uni-icons>
									<text>{{sence.rating}}</text>
								</view>
								<!-- <text class="spot-price">¥{{sence.price}}起</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app';

	import uniRequest from '@/components/request.js';

	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

	const paging = ref(null)

	useZPaging(paging)

	let searchValue = ref("")
	let currentPage = 1;
	const recommendCityList = ref([])
	let dataList = ref([])
	let img = "/static/noneimage.jpg"

	const search = () => {
		if (searchValue.value == null || searchValue.value == '') {
			return
		}
		uni.navigateTo({
			url: "/attractionPages/sence/AttractionList?searchValue=" + searchValue.value
		})
	}
	const clear = (res) => {}

	// 搜索框结束
	const scanAllCity = () => {
		uni.navigateTo({
			url: "/attractionPages/city/CityList"
		})
	}

	const openCitySencePage = (id) => {
		uni.navigateTo({
			url: "/attractionPages/sence/AttractionList?cityId=" + id
		})
	}

	const openSencePage = (id) => {
		uni.navigateTo({
			url: "/attractionPages/sence/ScenicInfo?id=" + id
		})
	}

	/**
	 * 获取推荐景点
	 */
	const getRecommendSence = (pageNo, pageSize) => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/recommendScenicList',
			method: 'GET',
			data: {
				"cur": pageNo,
				"size": pageSize
			},
			success(res) {
				console.log(res)
				paging.value.complete(res.data.data);
			},
			fail(err) {
				paging.value.complete(false);
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}

	const getRecommendCity = () => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/recommendCityList',
			method: 'GET',
			success(res) {
				recommendCityList.value = res.data.data.slice(0, 9)
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}
	onMounted(() => {
		getRecommendCity()
		// getRecommendSence(1, 100)
	})

	// 下拉加载
	onReachBottom(() => {
		paging.value.reload()
	})

	// const bannerList = ref([
	// 	{
	// 		imageUrl: 'https://ai-public.mastergo.com/ai/img_res/160d7f78359f1020858d6b0256058eed.jpg',
	// 		title: '苏州园林之旅'
	// 	},
	// 	{
	// 		imageUrl: 'https://ai-public.mastergo.com/ai/img_res/76593d5b56d6cce0fb227732968b908c.jpg',
	// 		title: '张家界探险之旅'
	// 	}
	// ]);
	const cityList = ref([{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/06639e78250a3bf89246b1e24b63ae1f.jpg',
			name: '上海',
			description: '魔都魅力',
			hot: '98'
		},
		{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/fbff4fa0b861a35274b071e485d7e7f7.jpg',
			name: '北京',
			description: '古都风韵',
			hot: '97'
		},
		{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/69dcf5083aac7aa33b5ae7ca35a3a27b.jpg',
			name: '广州',
			description: '岭南文化',
			hot: '96'
		},
		{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f88bbfb0ed8a84969da24700b35e4b10.jpg',
			name: '深圳',
			description: '创新之城',
			hot: '95'
		},
		{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/b6dc3a5e3e782b95d52fc5aa4ac073ef.jpg',
			name: '重庆',
			description: '山城风光',
			hot: '94'
		},
		{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/69c61a75b3ddfc94139e705fbb4001d4.jpg',
			name: '成都',
			description: '休闲之都',
			hot: '93'
		}
	]);
	const spotList = ref([{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/687df30526b181f452d3d47cf0d2b3ce.jpg',
			name: '八达岭长城',
			location: '北京市延庆区',
			score: '4.9',
			price: '120'
		},
		{
			imageUrl: 'https://ai-public.mastergo.com/ai/img_res/914328bbb2f8f4c55298ed8e891596aa.jpg',
			name: '西湖景区',
			location: '杭州市上城区',
			score: '4.8',
			price: '80'
		}
	]);
</script>
<style>
	page {
		height: 100%;
		background-color: #F5F7FA;
	}

	.container {
		padding: 0 30rpx;
		padding-bottom: 100rpx;
	}

	.search-area {
		position: sticky;
		top: 0;
		z-index: 100;
		padding: 20rpx 0;
		background-color: #F5F7FA;
	}

	.location {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.city {
		margin-left: 8rpx;
		font-size: 14px;
		color: #333;
	}

	.search-box {
		display: flex;
		align-items: center;
		height: 72rpx;
		padding: 0 24rpx;
		background-color: #FFFFFF;
		border-radius: 36rpx;
	}

	.search-box input {
		flex: 1;
		margin: 0 20rpx;
		font-size: 14px;
	}

	.placeholder {
		color: #999;
	}

	.banner {
		position: relative;
		width: 690rpx;
		height: 300rpx;
		margin: 20rpx 0;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.banner-title {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		color: #FFFFFF;
		font-size: 16px;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.section {
		margin: 40rpx 0;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.more {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #999;
	}

	.city-list {
		overflow: auto;
	}

	.city-item {
		display: inline-block;
		width: 210rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.city-item:last-child {
		margin-right: 0;
	}

	.city-image {
		width: 240rpx;
		height: 250rpx;
		white-space: nowrap;
	}

	.city-name {
		display: block;
		margin: 16rpx;
		font-size: 16px;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}

	.city-desc {
		display: block;
		margin: 0 16rpx;
		font-size: 12px;
		color: #999;
	}

	.city-hot {
		margin: 16rpx;
		padding: 4rpx 12rpx;
		font-size: 12px;
		color: #4AA5FF;
		background-color: rgba(74, 165, 255, 0.1);
		border-radius: 20rpx;
		display: inline-block;
	}

	.spot-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.spot-item {
		width: calc(50% - 16rpx);
	}

	.spot-item {
		border-radius: 12rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.spot-image {
		width: 100%;
		height: 200rpx;
	}

	.spot-info {
		padding: 16rpx;
	}

	.spot-name {
		display: block;
		font-size: 16px;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.spot-location {
		display: block;
		margin-top: 8rpx;
		font-size: 12px;
		color: #999;
	}

	.spot-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.spot-score {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #FF9500;
	}

	.spot-price {
		font-size: 14px;
		color: #FF4B4B;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 33.33%;
	}

	.tab-text {
		margin-top: 6rpx;
		font-size: 12px;
		color: #999;
	}

	.tab-item.active .tab-text {
		color: #4AA5FF;
	}
</style>